<template>
    <div class="app-container">
        <el-descriptions title="设备信息">
            <span slot="title" style="padding-right: 20px;"><i class="el-icon-back" @click="back()"></i>{{ device.name }}
                <el-link :underline="false" type="danger"  v-if="device.typeName != '智能网关'" @click="dialogFormVisible1 = true;" style="margin-left: 20px;">发送指令</el-link>
            </span>
            <el-descriptions-item label="产品">{{ device.productName }}</el-descriptions-item>
            <el-descriptions-item label="设备类型">{{ device.typeName }}</el-descriptions-item>
            <el-descriptions-item label="deviceKey">{{ device.deviceKey }}</el-descriptions-item>
            <el-descriptions-item label="deviceSectet">{{ device.deviceSecret }}</el-descriptions-item>
            <el-descriptions-item label="在线状态">
                <template>
                    <el-tag v-if="device.active == '关'" key="离线" type="danger" effect="dark">
                        {{ '离线' }}
                    </el-tag>
                    <el-tag v-if="device.active == '开'" key="在线" type="success" effect="dark">
                        {{ '在线' }}
                    </el-tag>
                </template>
            </el-descriptions-item>
        </el-descriptions>
        <div>
            <el-tabs type="border-card">
                <el-tab-pane label="设备信息">
                    <el-descriptions title="设备信息">
                        <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
                        <el-descriptions-item label="productKey">{{ product.productKey }}</el-descriptions-item>
                        <el-descriptions-item label="deviceName">{{ device.name }}</el-descriptions-item>
                        <el-descriptions-item label="地域">{{ product.areaCode }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ product.createTime }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="Topic列表">
                    <el-table :data="topic" style="width: 100%"
                        :header-cell-style="{ background: '#F7F7F8', color: '#18191B', 'text-align': 'center' }">
                        <el-table-column prop="topic" label="设备的Topic" width="1500px" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-link @click="details(scope.row.id)" type="info" :underline="false"
                                    disabled>详情</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                                <el-link @click="deleteData(scope.row.id)" type="info" disabled :underline="false">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="物模型数据">暂无数据</el-tab-pane>
                <el-tab-pane label="上报数据">暂无数据</el-tab-pane>
                <el-tab-pane label="发送数据">暂无数据</el-tab-pane>
            </el-tabs>
        </div>

        <el-dialog title="发送指令" :visible.sync="dialogFormVisible1" width="500px">
            <el-form :model="device" label-width="100px" class="demo-ruleForm" label-position="top" size="mini">
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="device.name" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="设备Key" prop="deviceKey">
                    <el-input v-model="device.deviceKey" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="继电器编号" prop="groupId">
                    <el-input-number controls-position="right" v-model="device.groupId" :min="0" :max="100"
                        style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="开关指令" prop="active">
                    <el-select v-model="device.active" style="width: 100%;">
                        <el-option key="1" label="关" value="1"></el-option>
                        <el-option key="2" label="开" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false, deviceDetails.active = undefined">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
//导入device api
import { details, product, topic, sendInstruction } from "@/api/device";
export default {
    data() {
        return {
            device: {},
            product: {},
            topic: [],
            dialogFormVisible1: false,
            deviceDetails: {}

        }
    },
    methods: {
        search() {
            var id = localStorage.getItem("id")
            details(id).then((res) => {
                this.device = res.data
                if (this.device.active == 1) {
                    this.device.active = "关"
                } else {
                    this.device.active = "开"
                }
                product(this.device.productId).then((res) => {
                    this.product = res.data
                })
                topic(this.device.deviceKey).then((res) => {
                    if (res.code == 0) {
                        this.topic = res.data
                    }
                })
            })
        },
        submit() {
            sendInstruction(this.deviceDetails).then((res) => {
                if (res.code == 0) {
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                    this.dialogFormVisible1 = false
                    this.search()
                } else {
                    this.$message.error('修改失败！');
                }
            })
        },
        back(){
            this.$router.go(-1)
        }
    },
    created() {
        this.search()
    },
}
</script>
<style lang="scss">
.el-input-number .el-input__inner {
    text-align: left;
}
</style>